import React from 'react'
import ReactDOM from 'react-dom/client'

const root = ReactDOM.createRoot(document.getElementById('root'))

// 条件渲染的第一种方式 if-else
const isLoading = true
const loadData = () => {
  if (isLoading) {
    return <div>数据加载中</div>
  } else {
    return <div>数据加载完成</div>
  }
}
// 条件渲染的第二种方式 三元
const loadData1 = () => {
  return isLoading ? <div>数据加载中1</div> : <div>数据加载完成1</div>
}
// 条件渲染的第三种方式 逻辑与
const loadData2 = () => {
  return isLoading && <div>loading……</div>
}
const element = (
  <>
    <div>我是条件渲染：</div>
    {loadData()}
    {loadData1()}
    {loadData2()}
  </>
)
root.render(<>{element}</>)
